import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeConfigProvider } from './contexts/ThemeConfigContext';
import { MessageProvider } from './contexts/MessageContext';
import { AuthProvider } from './contexts/AuthContext';
import RoutePermissionGuard from './components/RoutePermissionGuard';
import LayoutSelector from './layouts/LayoutSelector';
import ErrorBoundary from './components/ErrorBoundary';
import { getRoutes } from './config/routes';
import './styles/zindex.css';
import './i18n';

function App() {
  const routes = getRoutes();

  return (
    <ErrorBoundary>
      <MessageProvider>
        <AuthProvider>
          <ThemeConfigProvider>
            <Router>
              <RoutePermissionGuard>
                <LayoutSelector>
                  <Routes>
                    {routes.map((route, index) => (
                      <Route
                        key={route.path || index}
                        path={route.path}
                        element={route.element}
                      />
                    ))}
                  </Routes>
                </LayoutSelector>
              </RoutePermissionGuard>
            </Router>
          </ThemeConfigProvider>
        </AuthProvider>
      </MessageProvider>
    </ErrorBoundary>
  );
}

export default App;